<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>求职准备测试</title>
	<link rel="shortcut icon" href="images/title.ico" type="image/x-ico"/>  
	<!-- CSS includes -->
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">

	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	<script src="js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/vue.js"></script>
</head>
<style type="text/css">
	[v-cloak] {
	  display: none;
	}
</style>
<body>

<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button> -->
			<a href="index.html" title="求职准备度测试">
                <img class="img-responsive" src="images/logo01.jpg" alt="求职准备度测试"/>
            </a>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li class="active"><a href="index.html" class="smooth-scroll">HOME</a></li>
				<li><a href="about.html">ABOUT</a></li>
				<li><a href="services.html">SERVICES</a></li>
				<li><a href="gallery.html">GALLERY</a></li>
				<li><a href="contact.html">CONTACT</a></li>
			</ul>
		</div> -->
		<!-- /.navbar-collapse -->
	</div><!-- /.container-fluid -->
</nav>

<!--main-->
<div class="container-home">
    <div class="container">
		<div class="row">
			<div class="col-sm-12" id='part1'  v-cloak>
				<h2 class="text-danger">
					第一部分：自我总体评价
				</h2>
				<div class="col-sm-12" >
					<p class="text-justify" >
						{{subject_title}}
					</p>
					<select class="form-control input-sm" v-model="selected">
						<option  v-for="option in options" v-bind:value="option.value">
							{{option.text}}
						</option>
					</select>
					<br/>
				</div>	
				<br/>
				<button class="btn btn-success btn-lg" type="button" v-on:click="gotoMain($selected)">进入下一部分</button>
			</div>
			<!-- <div class="col-md-6 text-center">
				<img src="images/image1.jpg" class="img-responsive" />
			</div> -->
		</div>
    </div>
</div>

<footer id="subfooter" class="clearfix">
    <div class="container">
        <div class="row">
			<div class="col-md-6">
                <p style="font-size:18px;"><span class="fa fa-map-marker text-color:#fff"></span> 联系我们</p>
                <p>中南大学就业指导中心</p>
                <p>地址：湖南省长沙市岳麓区中南大学校本部二办公楼二层</p>
            </div>
            <!-- <div class="col-md-6">
                <p style="font-size:18px;"><span class="fa fa-envelope-o text-color:#fff"></span> NEWSLETTER</p>
                <p>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter your email..." />
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button">Subscribe</button>
                        </span>
                    </div>
            </div> -->
        </div>
    </div>
</footer>
<script type="text/javascript">
	var dataObj = '';
	var part1 = '';
	var id = '';
	var subject_title = '';
	
	//请求数据
	$.ajax({
		url : 'getIndexSubject',
		data : {},
	 	async : false,
	 	success : function(data){
	 		var dataObj = eval('(' + data + ')');
		    console.log(dataObj);
		   	part1 = dataObj.part1;
		    id = part1.subject_id;
		    subject_title = part1.subject_title;
	 	}
	});
	
	new Vue({
		  el: '#part1',
		  data: {
			subject_id: id,
			subject_title: subject_title,			
			selected: '65',
		    options: [
		      { text: '1-10', value: '5' },
		      { text: '11-20', value: '15' },
		      { text: '21-30', value: '25' },
		      { text: '31-40', value: '35' },
		      { text: '41-50', value: '45' },
		      { text: '51-60', value: '55' },
		      { text: '61-70', value: '65' },
		      { text: '71-80', value: '75' },
		      { text: '81-90', value: '85' },
		      { text: '91-100', value: '95' }
		    ]},
		  methods: {
			  gotoMain: function () {
			  	//alert(this.selected+','+this.subject_id);
			    location.href = "main.html?score="+this.selected+"&id="+this.subject_id;
			    }
			  }
		});
</script>
</body>
</html>
    